import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import '../style/Search.scss'
import service from '../api';


interface State {
    hotlist: Hotlist[],
    value: any,
    historyList: any
}
interface Hotlist {
    keyword: string
}
class Search extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            hotlist: [],
            value: '',
            historyList: []
        }
    }
    // 热门搜索
    async componentDidMount() {
        var res = await service.pro.hotword()
        // console.log('热门', res);
        this.setState({ hotlist: res.data.data })
        console.log(localStorage.getItem('historyList'));
        
        var arr = localStorage.getItem('historyList')
        console.log(arr);
        
        // this.setState({ historyList: this.state.historyList.push(arr) })
    }

    // 点击搜索
    async goSearch() {
        var res = await service.pro.search({ keyword: this.state.value })
        this.props.history.push({ pathname: '/searchlist', state: { searchList: res.data.data } })


        this.setState({
            historyList: this.state.historyList.push(this.state.value)
        })
       
        localStorage.setItem('historyList', this.state.historyList[0])
        console.log(this.state.historyList);
    }

    // 热门搜索详情
    async searchClick(keyword: any) {
        var res = await service.pro.search({ keyword })
        // console.log(res);
        this.props.history.push({ pathname: '/searchlist', state: { searchList: res.data.data } })
    }

    render() {

        return (
            <div className='search'>

                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>
                        <input value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} type="text" placeholder='请输入搜索内容' />
                        <button onClick={() => { this.goSearch() }}>搜索</button>
                    </NavBar>
                </div>

                <h2>历史搜索</h2>
                <div className="button">
                    {
                        this.state.historyList && this.state.historyList.length != 0 ?
                            this.state.historyList.map((item: any, index: any) => {
                                return (
                                    <button key={index} onClick={() => { this.searchClick(item.keyword) }}>
                                        {item.keyword}
                                    </button>
                                )
                            }) : ''
                    }
                </div>

                <h2>热门搜索</h2>
                <div className="button">
                    {
                        this.state.hotlist.map((item, index) => {
                            return (
                                <button key={index} onClick={() => { this.searchClick(item.keyword) }}>
                                    {item.keyword}
                                </button>
                            )
                        })
                    }
                </div>


            </div>
        );
    }
}

export default Search;